import React, { Component } from "react";
import "./index.less";
import { Select, Input, DatePicker, Button, Tabs, Pagination } from "antd";
import moment, { isMoment } from "moment";
import "moment/locale/zh-cn";
import "./index.less";
const { Option } = Select;
const { RangePicker } = DatePicker;
moment.locale("zh-cn");

function handleChange(value) {
  console.log(`selected ${value}`);
}
function onChange(dates, dateStrings) {
  console.log("From: ", dates[0], ", to: ", dates[1]);
  console.log("From: ", dateStrings[0], ", to: ", dateStrings[1]);
}
function callback(key) {
  console.log(key);
}
export default class FilterFrom extends Component {
  render() {
    return (
      <div className="query-search">
        {/* 订单搜索 */}
        <div className="content">
          <span className="title">订单搜索：</span>
          <Select
            defaultValue="lucy"
            style={{ width: 120 }}
            onChange={handleChange}
          >
            <Option value="jack">Jack</Option>
            <Option value="lucy">Lucy</Option>
            <Option value="disabled" disabled>
              Disabled
            </Option>
            <Option value="Yiminghe">yiminghe</Option>
          </Select>
          <Input className="search-input" />
        </div>
        {/* 下单时间 */}
        <div className="order-time">
          <span className="title">下单时间：</span>
          <RangePicker
            ranges={{
              昨天: [moment(), moment()],
              今天: [moment().startOf("date"), moment()],
              近7天: [moment().startOf("week"), moment().endOf("week")],
              近30天: [moment().startOf("month"), moment().endOf("month")]
            }}
            //   defaultPickerValue=[moment()]
            showTime
            format="YYYY/MM/DD HH:mm:ss"
            onChange={onChange}
          />
        </div>
        {/* 商品名称： */}
        <div className="goods">
          <div>
            <span className="title">商品名称：</span>
            <Input className="goods-input" />
          </div>
          <div className="goods-content">
            <span className="title">订单类型：</span>
            <Select
              defaultValue="lucy"
              style={{ width: 170 }}
              onChange={handleChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">全部</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
          <div className="goods-content">
            <span className="title">维权状态：</span>
            <Select
              defaultValue="lucy"
              style={{ width: 170 }}
              onChange={handleChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">全部</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
        </div>
        {/* 订单状态 */}
        <div className="order-status">
          <div>
            <span className="title">订单状态：</span>
            <Select
              defaultValue="lucy"
              style={{ width: 170 }}
              onChange={handleChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">全部</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
          <div className="status-content">
            <span className="title">配送方式：</span>
            <Select
              defaultValue="lucy"
              style={{ width: 170 }}
              onChange={handleChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">全部</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
          <div className="status-content">
            <span className="title">付款方式：</span>
            <Select
              defaultValue="lucy"
              style={{ width: 170 }}
              onChange={handleChange}
            >
              <Option value="jack">Jack</Option>
              <Option value="lucy">全部</Option>
              <Option value="disabled" disabled>
                Disabled
              </Option>
              <Option value="Yiminghe">yiminghe</Option>
            </Select>
          </div>
        </div>
        {/* 清空筛选条件 */}
        <div className="filter">
          <Button type="primary" className="select">
            筛选
          </Button>
          <Button className="export-report">导出报表</Button>
          清空筛选条件
        </div>
      </div>
    );
  }
}
